﻿@page "/datagrid"
@page "/docs/guides/components/datagrid.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    DataGrid
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Display tabular data with ease. Perform paging, sorting and filtering through Entity Framework without extra code.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo the Employee grid binds to <code>IQueryable</code> with the <strong>ID, Photo, and First Name</strong> columns frozen on the left for easy reference while scrolling horizontally through the many data columns.
</RadzenText>

<RadzenExample ComponentName="DataGrid" Example="DataGridIQueryable">
    <DataGridIQueryable />
</RadzenExample>

<RadzenText Anchor="datagrid#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor DataGrid component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@data" />

@code {
    List<KeyboardShortcut> data = new List<KeyboardShortcut>
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a DataGrid." },
        new KeyboardShortcut { Key = "DownArrow", Action = "Focus next DataGrid item." },
        new KeyboardShortcut { Key = "UpArrow", Action = "Focus previous DataGrid item." },
        new KeyboardShortcut { Key = "Enter or Space", Action = "Select the focused DataGrid item." },
        new KeyboardShortcut { Key = "Shift + Enter or Space", Action = "Select/deselect multiple DataGrid items." },
        new KeyboardShortcut { Key = "LeftArrow when header row is focused", Action = "Focus previous DataGrid header cell." },
        new KeyboardShortcut { Key = "RightArrow when header row is focused", Action = "Focus next DataGrid header cell." },
        new KeyboardShortcut { Key = "Enter on focused header cell", Action = "Sort DataGrid by focused header cell column." },
        new KeyboardShortcut { Key = "Alt + DownArrow on focused header cell", Action = "Open DataGrid column filter popup." },
        new KeyboardShortcut { Key = "Tab in an opened DataGrid column filter popup", Action = "Navigate forward across available filter options." },
        new KeyboardShortcut { Key = "Shift + Tab in an opened DataGrid column filter popup", Action = "Navigate backward across available filter options." },
        new KeyboardShortcut { Key = "Esc in an opened DataGrid column filter popup", Action = "Close the DataGrid column filter popup." },
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a DataGrid pager." },
        new KeyboardShortcut { Key = "LeftArrow on focused pager", Action = "Focus previous DataGrid pager page." },
        new KeyboardShortcut { Key = "RightArrow on focused pager", Action = "Focus next DataGrid pager page." },
        new KeyboardShortcut { Key = "Enter or Space on focused pager", Action = "Go to the focused DataGrid pager page." }
    };
}